<template>
  <!-- 状态监控 -->
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content', y: 'calc(100vh - 220px)' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <router-link
          :to="{
            name: 'AlarmLog',
            query: { stationId: record.stationId, warnType: column.title },
          }"
        >
          <template v-if="column.key === 'stationName'">
            {{ record.stationName }}
          </template>
          <template v-else-if="column.key === 'fireAlarm'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div v-if="record.fireAlarm === 0" class="greenCircle"></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'tripAlarm'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div v-if="record.tripAlarm === 0" class="greenCircle"></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'doorOpens'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div v-if="record.doorOpens === 0" class="greenCircle"></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'emergencyStopAlarm'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.emergencyStopAlarm === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'waterloggingAlarm'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.waterloggingAlarm === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'meterCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.meterCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'ccuCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.ccuCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'gatewayCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.gatewayCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'cameraCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.cameraCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'clusterCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.clusterCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
          <template v-else-if="column.key === 'pcsCommunication'">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                v-if="record.pcsCommunication === 0"
                class="greenCircle"
              ></div>
              <div v-else class="redCircle"></div>
            </div>
          </template>
        </router-link>
      </template>
    </a-table>
  </div>
</template>
<script setup>

import { commonConfigStore } from "@/stores/commonConfig"
const $api = inject("$api")
const tableLoading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 80,
    resizable: true,
    align: "center",
  },
  {
    title: "主机安全报警",
    children: [
      {
        title: "消防报警",
        dataIndex: "fireAlarm",
        key: "fireAlarm",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "跳闸报警",
        dataIndex: "tripAlarm",
        key: "tripAlarm",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "柜门打开",
        dataIndex: "doorOpens",
        key: "doorOpens",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "急停告警",
        dataIndex: "emergencyStopAlarm",
        key: "emergencyStopAlarm",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "水浸告警",
        dataIndex: "waterloggingAlarm",
        key: "waterloggingAlarm",
        width: 80,
        resizable: true,
        align: "center",
      },
    ],
  },
  {
    title: "通讯异常",
    children: [
      {
        title: "电表通讯",
        dataIndex: "meterCommunication",
        key: "meterCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "CCU通讯",
        dataIndex: "ccuCommunication",
        key: "ccuCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "调度网关通讯",
        dataIndex: "gatewayCommunication",
        key: "gatewayCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "摄像头通讯",
        dataIndex: "cameraCommunication",
        key: "cameraCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "簇通讯",
        dataIndex: "clusterCommunication",
        key: "clusterCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
      {
        title: "PCS通讯",
        dataIndex: "pcsCommunication",
        key: "pcsCommunication",
        width: 80,
        resizable: true,
        align: "center",
      },
    ],
  },
])

const rowClick = (record, index) => {
  console.log("点击了第", index + 1, "行，该行数据为：", record)
}

function handleResizeColumn(w, col) {
  col.width = w
}

onMounted(async () => {
  // getTableTitle() //动态表头会有 column.key 获取不到key的问题，疑似因为map后的数据 key 会有引号，导致渲染失败
  getTableData()
})
const getTableTitle = async () => {
  //获取动态标题
  const res = await $api.getStatusMonitorTitle()
  if (res && res.code === 0) {
    resColumns(res.data)
  }
}
const getTableData = async () => {
  tableLoading.value = true
  const data = await $api.getStatusMonitorData()
  if (data && data.code === 0) {
    tableLoading.value = false
    tableData.value = data.data
  }
}

const resColumns = (data) => {
  columns.value = data.map((row) => {
    if (row.children === null || row.children === undefined) {
      return {
        title: row.title,
        dataIndex: row.dataIndex,
        key: row.dataIndex,
        width: 80,
        resizable: true,
        align: "center",
      }
    } else {
      const child = row.children.map((item) => {
        return {
          title: item.title,
          dataIndex: item.dataIndex,
          key: item.dataIndex,
          width: 80,
          resizable: true,
          align: "center",
        }
      })
      return {
        title: row.title,
        key: "",
        children: child,
      }
    }
  })
}
</script>

<style lang="less" scoped>
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
.greenCircle {
  width: 25px;
  height: 25px;
  background-color: #00ff00;
  border-radius: 50%;
}
.redCircle {
  width: 25px;
  height: 25px;
  background-color: #ff0000;
  border-radius: 50%;
}
</style>
